<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>

<body>

<div style="color:#F00; font-size:20px;">使用js动态添加行内样式</div>

<form id="f">
	<p>用户名：<input type="text" name="username" value="" /><span id="ts1"></span></p>
    <p>密码：<input type="password" name="userpwd" value="" /><span id="ts2"></span></p>
    <p><input type="button" value="检测" onclick="check()" /></p>
</form>

</body>
<script type="text/javascript">
/*CSS 的脚本特性（动态添加样式）  对象.style.脚本特效

命名：
1.css的属性 属于一个单词：脚本特效就是 该单词
2.css的属性 是多个单词以上，脚本特效就是写成  驼峰式的，如：fontSize/textAlign/textIndent
*/

function check(){
	
	var f = document.getElementById('f');
	var ts1 = document.getElementById('ts1');
	var ts2 = document.getElementById('ts2');
	
	//判读用户名是否为空
	if( f.username.value == '' ){
		//提示
		ts1.innerHTML = '<img src="error.gif" />请输入用户名!';
		ts1.style.color = 'red';
		ts1.style.fontWeight = 'bold';
	}else{
		
		ts1.innerHTML = '<img src="good_icon.png" />';
	}
	
	//判断密码是否为空
	if( f.userpwd.value == '' ){
		//提示
		ts2.innerHTML = '<img src="error.gif" />请输入密码！';
		ts2.style.color = 'red';
		ts2.style.fontWeight = 'bold';
	}else{
	
		ts2.innerHTML = '<img src="good_icon.png" />';
	}
	

}




</script>
</html>
